<template>
  <div style="margin-bottom: 20px">
    <el-menu
        default-active="/"
        class="el-menu-demo"
        mode="horizontal"
        router
    >
      <el-menu-item v-for="item in menu" :key="item.path" :index="item.path">{{ item.name }}</el-menu-item>
    </el-menu>
  </div>
</template>

<script setup>
import {ref} from "vue";

const menu = ref([
  {name: "首页", path: "/"},
  {name: "旅游产品", path: "/travel"},
  {name: "酒店预订", path: "/hotel"},
  {name: "个人信息", path: "/account"}
]);
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
